﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-2.0.3.js"></script>
</head>
<body>
    <p>DOM的修改不会立马导致渲染，渲染线程和Javascript线程是互斥的，必须等到Javascript线程挂起或当次调度执行完后才会执行渲染。</p>
    <div id="Test1" style="height: 100px; margin: 5px; background-color: yellow;"></div>
    <div id="Test2" style="height: 100px; margin: 5px; background-color: blue;"></div>
    <button onclick="alert(1)"></button>
</body>
</html>

<script type="text/javascript">
    //function sleep(millisecond) {
    //    var start = new Date().getTime();

    //    do {
    //        var end = new Date().getTime();
    //    } while (end - start <= millisecond);
    //}

    //setTimeout(function () {
    //    console.log('start...');

    //    $("#Test1").css({
    //        backgroundColor: 'red'
    //    });

    //    sleep(3000);

    //    console.log('...end');
    //}, 2000);
</script>

<script type="text/javascript">
    setTimeout(function () {
        console.log("start");
        //var fibonacci = function (n) {
        //    if (n == 1 | n == 0) {
        //        return n;
        //    }

        //    return fibonacci(n - 1) + fibonacci(n - 2);
        //}

        //for (var i = 1; i <= 35; i++) {
        //    $("#Test2").append(fibonacci(i) + '<br/>');
        //}

        var fibonacci = function (n, callback) {
            if (n == 1 | n == 0) {
                callback(n);
            }

            setTimeout(function () {
                fibonacci(n - 1, function (n_1) {
                    fibonacci(n - 2, function (n_2) {
                        callback(n_1 + n_2);
                    });
                });
            }, 0);
        }

        for (var i = 1; i <= 35; i++) {
            fibonacci(i, function (result) {
                $("#Test2").append(result + '<br/>');
            });
        }
    }, 4000);
</script>
